<template>
  <h1>这是父组件</h1>
  <!-- 引入子组件 BaseArticle 并传入相关属性 -->
  <BaseArticle ref="sonRef" :id="article.id" :title="article.title" :content="article.content"
               :author="article.author"/>
  <!-- 按钮，点击后调用子组件的方法 -->
  <button @click="callSonMethod">调用子组件的方法</button>
</template>

<script setup>
import BaseArticle from "./BaseArticle.vue"; // 导入子组件
import {ref} from "vue"; // 从 Vue 中导入 ref

// 创建一个响应式的 article 对象，包含文章的 id、标题、内容和作者
const article = ref({
  id: 1,
  title: "这是文章标题",
  content: "这是文章内容",
  author: "这是作者"
});

// 创建一个 ref 变量，用于引用子组件
const sonRef = ref(null);

// 定义调用子组件方法的函数
const callSonMethod = () => {
  // 调用子组件的 addReadCount 方法
  sonRef.value.addReadCount();
}

</script>

<style scoped>
/* 样式作用范围仅限于此组件 */
</style>
